<template>
  <div class="noticeList">
    <x-header class="header" ref="header" :left-options="{showBack: showHeaderBack}">消息中心</x-header>
    <div class="topHolder"></div>
    <scroller :height="scrollerHeight" lock-x use-pulldown use-pullup :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refreshList()" :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMoreList" ref="loadMoreScroller" >
      <panel header="消息列表" :list="noticeList" type="4"></panel>
    </scroller>
  </div>
</template>

<script>
  import {getNoticeIdList,getNoticeByIds} from '../api'
  import { XHeader, Panel, Scroller } from 'vux'
  import {message} from "../common/util";

  export default {
    name:'noticeList',
    components:{
      XHeader,
      Panel,
      Scroller
    },
    data(){
      return {
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:true,
        noticeList:[],
        idArrayList:[],
        scrollerHeight:'',
        pulldownDefaultConfig:{
          content: '下拉刷新',
          height: 40,
          autoRefresh: false,
          downContent: '下拉刷新',
          upContent: '释放后刷新',
          loadingContent: '正在刷新...',
          clsPrefix: 'xs-plugin-pulldown-'
        },
        pullupDefaultConfig:{
          content: '上拉加载更多',
          pullUpHeight: 60,
          height: 40,
          autoRefresh: false,
          downContent: '释放后加载',
          upContent: '上拉加载更多',
          loadingContent: '加载中...',
          clsPrefix: 'xs-plugin-pullup-'
        },
        currentPage: 0,
        totalItems:0,
        pageSize:10,
        onFetching:true
      }
    },
    methods:{
      refreshList(params){
        this.noticeList = []
        this.currentPage = 0
        getNoticeIdList().then((res)=>{
          if(res.status == 'success'){
            this.$nextTick(() => {
              this.$refs.loadMoreScroller.reset({top: 0})
              this.$refs.loadMoreScroller.donePulldown()
              this.idArrayList = res.data
              this.totalItems = res.data.length
              this.loadMoreList()
            })
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getNoticeIdList error info:', res.msg)
          }
          if(params != undefined && params.callback != undefined)params.callback()
        }).catch((err)=>{console.log('getNoticeIdList catch info:',err)})
      },
      loadMoreList(){
        if (this.onFetching) {
          this.onFetching = false
          setTimeout(() => {
            let reqParams = [],start = this.currentPage*this.pageSize,end = start + this.pageSize - 1
            for(var i = start; i <= end; i++){
              if(this.idArrayList[i] != undefined)reqParams.push(this.idArrayList[i])
            }
            getNoticeByIds(reqParams).then((res)=>{
              if(res.status == 'success'){
                if(res.data.length > 0){//后端实际用这个
                  //if (this.noticeList.length < this.totalItems) {//前端测试用这个
                  for(var i = 0; i < res.data.length; i++){
                    this.noticeList.push(res.data[i])
                  }
                  this.currentPage++
                }else{
                  message({message:'已经加载到底了！',type:'info'})
                }
                this.onFetching = true
                this.$nextTick(() => {
                  if(this.$refs.loadMoreScroller != undefined){
                    this.$refs.loadMoreScroller.donePullup()
                    this.$refs.loadMoreScroller.reset()
                  }
                })
              }else if(res.status == 'error') {
                message({message:res.msg,type:'error'})
                console.log('getNoticeByIds error info:', res.msg)
              }
            }).catch((err)=>{console.log('getNoticeByIds catch info:',err)})
          }, 500)
        }
      },
      setSize(){
        let outHeight = this.$refs.header.$el.offsetHeight
        let contentHeight = window.screen.height - outHeight - 120
        this.scrollerHeight = contentHeight + 'px'
      }
    },
    mounted(){
      this.refreshList({callback:()=>{
          this.setSize()
          window.onresize = ()=>{
            this.setSize()
          }
          this.loadingStatus = false
          this.$store.commit('updateLoadingStatus',{isLoading:false})
        }})
    },
    beforeDestroy(){
      window.onresize = ()=>{}
    }
  }
</script>

<style lang="scss" scoped>
  .noticeList{

  }
</style>
